<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //发起ajax请求
      function ajaxRequest(url, ajaxRequestCallback) {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        //指定响应的类型
        xhr.responseType = "json";
        //指定请求结束后的回调函数
        xhr.onload = function () {
          ajaxRequestCallback(null, xhr.response);//{id:1}
        };
        //发送请求
        xhr.send();
      }
      //定义一个函数，用来串行的方式发送请求每个url地址
      function requests(urls, requestsCallback) {
        //用来存放每个请求的结果
        let result = [];
        //定义一个函数，名叫next,用来请求下一个url地址
        function next() {
          //取出当前url数组中的第一个元素
          const url = urls.shift();
          if (!url) return requestsCallback(null, result);
          //对第一个url地址发起ajax请求
          ajaxRequest(url, function ajaxRequestCallback(err, data) {
            //如果请求失败了，直接调用requestsCallback，并传递错误的原因
            //把接口返回的数据保存到数组里
            result.push(data);
            //接着调用next函数
            next();
          });
        }
        next();
      }
      debugger
      requests(
        ["data1.json", "data2.json", "data3.json"],
        function requestsCallback(err, result) {
          console.log(result);
        }
      );
    </script>
  </body>
</html>
